import { Input, message, Pagination, Popconfirm, Table } from "antd";
import Layout from "../Shared/Layout";
import MyButton from "../../Components/MyButton";
import { useCallback, useEffect, useState } from "react";
import { request } from "../../Api/api";

const TestPaper = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState({ current: 1, pageSize: 10 });
  const [where, setWhere] = useState({ searchWord: "" });
  const [total, setTotal] = useState(0);
  const columns = [
    { title: "名称", dataIndex: "name" },
    { title: "描述", dataIndex: "explain" },
    { title: "作者", dataIndex: "author" },
    {
      title: "考试时长",
      dataIndex: "examTime",
      render: (examTime) =>
        examTime.split(":")[0] + "小时" + examTime.split(":")[1] + "分钟",
    },
    { title: "总分", dataIndex: "sumPoint" },
    { title: "及格分", dataIndex: "passPoint" },
    {
      title: "创建时间",
      dataIndex: "createTime",
      render: (createTime) => new Date(createTime).toLocaleString(),
    },
    {
      title: "操作",
      dataIndex: "id",
      render: (id) => (
        <div>
          <MyButton
            className={"extra-btn"}
            type="primary"
            onClick={() =>
              (window.location.href = `/exam/testpaper/detail?id=${id}`)
            }
          >
            查看
          </MyButton>
          <Popconfirm
            title="确认删除该试卷？"
            onConfirm={() => deleteTestPaper(id)}
            okText="确认"
            cancelText="取消"
          >
            <span>
              <MyButton className={"extra-btn"} type="danger">
                删除
              </MyButton>
            </span>
          </Popconfirm>
        </div>
      ),
    },
  ];

  const bind = useCallback(async () => {
    const res = await request(
      "/testpaper/pagination",
      { page: page.current, limit: page.pageSize, key: where.searchWord },
      "GET"
    );
    if (res.code >= 0) {
      setTotal(res.data.total);
      setData(res.data.data);
    }
  }, [page, where]);
  const deleteTestPaper = async (id) => {
    const res = await request("/testpaper/delete", { id }, "POST");
    if (res.code >= 0) {
      message.success(res.message);
      await bind();
    } else {
      message.error(res.message);
    }
  };
  useEffect(() => {
    async function fetchData() {
      await bind();
    }
    fetchData();
  }, [bind]);
  return (
    <Layout>
      <div className="table-header">
        <div className="table-header-title">试卷列表</div>
        <div className="table-header-middle">
          <Input
            value={where.searchWord}
            onChange={(e) => setWhere({ searchWord: e.target.value })}
            placeholder="搜索"
          />
        </div>
        <div className="table-header-operation">
          <MyButton
            type="success"
            onClick={() => (window.location.href = "/exam/testpaper/add")}
          >
            添加
          </MyButton>
        </div>
      </div>
      <div className="table-container">
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          rowKey={({ id }) => id}
          scroll={{ x: "max-content" }}
        />
        <Pagination
          total={total}
          current={page.current}
          pageSize={page.pageSize}
          onChange={(current, pageSize) => setPage({ current, pageSize })}
          showQuickJumper={true}
        />
      </div>
    </Layout>
  );
};

export default TestPaper;
